// 1.引入路由
import Vue from "vue";
import VueRouter from 'vue-router'

// 引入组件
import Home from '../views/Home'
import Login from '../views/Login'
import News from '../views/Home/components/News'
import Music from '../views/Home/components/Music'
import Game from '../views/Home/components/Game'
import view_404 from '../views/view_404'

// 2.把路由作为插件使用
Vue.use(VueRouter)

// 3.实例化路由得到路由对象
export default new VueRouter({
    // 设置路由模式为history模式
    mode: 'history',
    // 使用routes配置项配置路由表
    routes: [
        {
            path: '/home',
            component: Home,
            // 如果当前的路由设置有默认子路由，则不建议使用书写name命名路由
            name: 'Home',
            // 默认子路由配置方式2
            // redirect: '/home/news',
            children: [
                /* 
                   二级路由及多级路由的path的两种写法：
                     1.完整的路径
                     2.只写当前二级路由的字符串地址，不带 /
                 */
                {
                    path: 'news',
                    component: News,
                    name: 'News',
                },
                {
                    path: 'music',
                    component: Music,
                    name: 'Music',
                },
                {
                    path: 'game',
                    component: Game,
                    name: 'Game',
                },
                // 默认子路由配置方式2
                {
                    path: '',
                    redirect: '/home/news'
                }

            ]
        },
        {
            path: '/login',
            component: Login,
            name: 'Login'
        },
        // 匹配默认路由
        {
            path: '/',
            // 重定向的配置
            redirect: '/home'
        },
        {
            path: '*',
            component: view_404
        }
    ]
})